<template>
  <!-- 新增弹窗 -->
  <el-dialog
    title="新增"
    :visible.sync="data.dialog_info_flag"
    @close="close"
    width="580px"
    @opened="openDialog"
  >
    <el-form :model="data.form" ref="addform">
      <el-form-item label="类型:" :label-width="data.formLabelWidth">
        <el-select v-model="data.form.category" placeholder="请选择活动区域">
          <el-option
            v-for="item in data.categoryOption"
            :key="item.id"
            :label="item.category_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题:" :label-width="data.formLabelWidth">
        <el-input v-model="data.form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="概况:" :label-width="data.formLabelWidth">
        <el-input
          type="textarea"
          v-model="data.form.content"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="danger" :loading="data.submitLoading" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { AddInfo,GetList } from "@/api/news.js";
import {
  reactive,
  ref,
  isRef,
  toRefs,
  onMounted,
  watchEffect,
} from "@vue/composition-api";
export default {
  name: "dialog_info",
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
    category: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { root, refs, emit }) {
    const data = reactive({
      dialog_info_flag: false,
      formLabelWidth: "70px",
      submitLoading: false,
      form:{
        category: "",
        title: "",
        content: "",
      },
      categoryOption:[]
    });
    // const form = reactive({
    //   category: "",
    //   title: "",
    //   content: "",
    //   name: "",
    //   region: "",
    //   date1: "",
    //   date2: "",
    //   delivery: false,
    //   type: [],
    //   resource: "",
    //   d: "",
    // });

    // const categoryOption = reactive({
    //   item: [],
    // });
    //监听flat属性
    watchEffect(() => {
      //因为props已经初始化了监听了
      data.dialog_info_flag = props.flag;
      // console.log(data.dialog_info_flag);
    });

    const close = () => {
      data.dialog_info_flag = false;
      // console.log(123)
      //加修饰器的写法在父组件传参过来的地方加sync
      emit("update:flag", false);
      //通过调用父组件的函数,进行对父组件的值进行修改
      // this.$emit('close',false)
      resetForm();
    };
    const openDialog = () => {
      data.categoryOption = props.category;
      console.log(data.categoryOption);
    };
    const resetForm = () => {
      data.form.category = "";
      data.form.title = "";
      data.form.content = "";
    };
    const submit = () => {
      let requestData = {
        categoryId: data.form.category,
        title: data.form.title,
        imgUrl: "http://********",
        createDate: "2020-02-02 12:00:00",
        content: data.form.content,
      };
      if (!data.form.category) {
        root.$message({
          message: "分类不能为空",
          type: "warning",
        });
        return false;
      }
      data.submitLoading = true;
      AddInfo(requestData)
        .then((res) => {
          let data = res.data;
          console.log(res.data);
          root.$message({
            message: data.message,
            type: "success",
          });
          data.submitLoading = false;
          //重置表单
          // refs.addform.resetFields();
          resetForm();
          //修改父组件的值然后关闭弹窗
          emit("update:flag", false);
          emit("update:flag", false);
          emit('getlist')
        })
        .catch((error) => {
          data.submitLoading = false;
          resetForm();
        });
    };
    return {
      data,
      // categoryOption,
      submit,
      close,
      openDialog,
    };
  },
  // watch:{
  //     handler(newvalue){
  //   flag:{
  //       this.dialog_info_flag = newvalue
  //     }
  //   }
  // }
};
</script>
<style>
</style>